import { NavLink } from "react-router-dom";
import { Menu } from "antd";

function BottomNavigator(){

    // 采用类似于 Vue 中定义路由记录的方式定义一个数组
    const routeRecords = [
        { path: '/' , name: 'root' , text: '首页' },
        { path: '/function/add' , name: 'add' , text: '添加' },
        { path: '/function/list' , name: 'list' , text: '列表' },
        { path: '/counter' , name: 'counter' , text: '计数器' },
        { path: '/render-props' , name: 'render-props' , text: 'render props' },
        { path: '/core-socialist-values' , name: 'core-socialist-values' , text: '核心价值观' },
        { path: '/higher-order-components' , name: 'higher-order-components' , text: '高阶组件(HOC)' },
        { path: '/custom-hook' , name: 'custom-hook' , text: '自定义HOOK' },
    ];

    // 将 routeRecords 数组中每个元素 映射成 MenuItemType 对象
    const menuItems = routeRecords.map( (recored) => {
        return { 
            key: recored.name , 
            label: <NavLink to={ recored.path }>{ recored.text }</NavLink> 
        }
    });

    return (
        <Menu theme="light" mode="horizontal" items={ menuItems }/>
    )
}

export default BottomNavigator;